<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Global imagery assets available from Cesium ion." />
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      window.startup = async function (Cesium) {
        "use strict";
        //Sandcastle_Begin
        const viewer = new Cesium.Viewer("cesiumContainer", {
          animation: false,
          baseLayer: false,
          baseLayerPicker: false,
          geocoder: Cesium.IonGeocodeProviderType.GOOGLE,
          timeline: false,
          sceneModePicker: false,
          navigationHelpButton: false,
          homeButton: false,
          terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1),
        });
        viewer.geocoder.viewModel.keepExpanded = true;

        const menuOptions = [];

        const dropdownOptions = [
          { label: "Google Maps 2D Contour", assetId: 3830186 },
          { label: "Google Maps 2D Labels Only", assetId: 3830185 },
          { label: "Google Maps 2D Roadmap", assetId: 3830184 },
          { label: "Google Maps 2D Satellite", assetId: 3830182 },
          { label: "Google Maps 2D Satellite with Labels", assetId: 3830183 },
          { label: "Azure Maps Aerial", assetId: 3891168 },
          { label: "Azure Maps Roads", assetId: 3891169 },
          { label: "Azure Maps Labels Only", assetId: 3891170 },
          { label: "Sentinel-2", assetId: 3954 },
        ];

        function showLayer(assetId) {
          viewer.imageryLayers.removeAll(true);
          const layer = Cesium.ImageryLayer.fromProviderAsync(
            Cesium.IonImageryProvider.fromAssetId(assetId),
          );
          viewer.imageryLayers.add(layer);
        }

        dropdownOptions.forEach((opt) => {
          const option = {
            text: opt.label,
            onselect: function () {
              showLayer(opt.assetId);
            },
          };
          menuOptions.push(option);
        });

        Sandcastle.addToolbarMenu(menuOptions);

        showLayer(3830186);

        viewer.scene.camera.flyTo({
          duration: 0,
          destination: new Cesium.Rectangle.fromDegrees(
            //Philly
            -75.280266,
            39.867004,
            -74.955763,
            40.137992,
          ),
        }); //Sandcastle_End
        Sandcastle.finishedLoading();
      };
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        window.startup(Cesium).catch((error) => {
          "use strict";
          console.error(error);
        });
      }
    </script>
  </body>
</html>
